<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow
	} from "@dcloudio/uni-app"
	import TabBar from '../../components/tab-bar.vue'
	import HomeNavBar from './c-cpns/home-nav-bar.vue'
	import HomeTabs from './c-cpns/home-tabs.vue'
	import HomeBanner from './c-cpns/home-banner.vue'
	import HomeList from './c-cpns/home-list.vue'
	import HomeMessage from './c-cpns/home-message.vue'
	import HomeStars from './c-cpns/home-stars.vue'
	import HomeMCN from './c-cpns/home-MCN.vue'
	import HomeGG from './c-cpns/home-gg.vue'

	// 隐藏原生的tab-bar
	onShow(() => {
		uni.hideTabBar()
	})
	const showMain = ref(true)
	const showMsg = ref(false)
	const showMCN = ref(false)
	const showStars = ref(false)
	const showTandian = ref(false)
	const showGG = ref(false)
	uni.$on('goMsg', function() {
		showMain.value = false
		showMsg.value = true
	})
	uni.$on('goMCN', function() {
		showMain.value = false
		showMCN.value = true
		if (uni.getStorageSync('mid')) {
			let userLeval = ''
			const mid = uni.getStorageSync('mid')
			uni.request({
				url: '',
				data: {
					mid: mid
				},
				header: {
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				},
				success: (res) => {

				}
			})
			if (userLeval < 1) {
				uni.showModal({
					title: '提示',
					content: '您的达人等级不足，无法查看MCN入驻机构',
					showCancel: false,
					success: () => {
						showMain.value = true
						showMCN.value = false
					}
				})
			}
		}
		else {
			uni.showToast({
				title:'请先登录',
				icon:'none',
				duration:2000
			})
			showMain.value= true
			showMCN.value = false
		}
	})
	uni.$on('goStars', function() {
		showMain.value = false
		showStars.value = true
	})
	uni.$on('goGG', function() {
		showMain.value = false
		showGG.value = true
	})

	// 手机状态栏的高度
	const {
		statusBarHeight
	} = uni.getSystemInfoSync()
</script>

<template>
	<view class="content">
		<view class="fiex">
		  <!-- <view class="statusBarHeight" :style="{ height: statusBarHeight * 2 + 'rpx' }"></view> -->
		  <home-nav-bar v-show="showMain" />
		  <home-tabs v-show="showMain" />
		</view>
		<view v-show="showMain" class="main"
			:style="{ height: `calc(100vh - ${statusBarHeight * 2}rpx - 96rpx - 80rpx - 106rpx)` }">
			<home-banner />
			<home-list />
		</view>
		<tab-bar />
		<home-message v-show='showMsg'></home-message>
		<HomeStars v-show='showStars'></HomeStars>
		<HomeGG v-show='showGG'></HomeGG>
		<home-MCN v-show='showMCN'></home-MCN>
	</view>
</template>

<style lang="scss" scoped>
  
	.content {
    .fiex{
      position: fixed;
    }
		height: 100vh;
		box-sizing: border-box;

		.statusBarHeight {
			background-color: #faca2a;
		}

		.main {
      padding-top:176rpx;
			// height: calc(100vh - 96rpx - 80rpx - 106rpx);
			background-color: #f0f0f0;
			overflow: auto;
		}
	}
</style>